<template>
  <div class="infocon">
     <span v-if="arr.length==0">请等待</span>
     <div v-else>
       <div>
          <img :src="arr[0].imgfirst" alt="" class="bannerImg">
      </div>
      <div class="titleDes">
          <h2>{{arr[0].title}}</h2>
          <p class="lanuage">{{arr[0].flolanguage}}</p>
          <p>￥<span>{{arr[0].nowprice}}</span> <span class="ori">￥{{arr[0].oriprice}}</span></p>
      </div>
      <div class="norms">
        <span class="group-title">规格</span>
        <span class="def">已选择默认规格</span>
        <span class="iconfont icon-backbeifen"></span>
      </div>
       <div class="reserve">
        <p class="group-title">评价</p>
        <p class="score">综合评分<span>5.0</span></p>
        <p class="all">
          <router-link :to="{name:'Discuss',query:{flowerId:arr[0].flowerId}}">
             查看全部评价<span class="iconfont icon-backbeifen"></span>
          </router-link>
       </p>
      </div>
      <div class="store" @click="fun()">
          <div>
              <img src="../../../public/img/logo.png" alt="">
          </div>
          <div class="storename">
              <h3>心意鲜花</h3>
              <p>心意鲜花，懂你心意</p>
          </div>
          <div id="goback">
              <span class="iconfont icon-backbeifen"></span>
          </div>
      </div>
      <div class="foo">
         <div class="footop">
             <div class="dro">
                 <span>图文详情</span>
             </div>
             <div class="foobottom">
                 <img :src="arr[0].infoimg1" alt="">
                 <img :src="arr[0].infoimg2" alt="">
                 <img :src="arr[0].infoimg3" alt="">
                 <img :src="arr[0].infoimg4" alt="">
                 <img :src="arr[0].infoimg5" alt="">
                 <img :src="arr[0].infoimg6" alt="">
                 <img :src="arr[0].infoimg7" alt="">
                 <img :src="arr[0].infoimg8" alt="">
                 <img :src="arr[0].infoimg9" alt="">            
            </div>
         </div>
         
      </div>
     </div>
    
      
  </div>
</template>

<script>
import {getlink} from '@/api/getapi.js'
import {getjsonlink} from '@/api/getapi.js'
export default {
      data(){
     return{ arr:[]}
    },
methods:{
    // allDiscuss(){
    //     this.$router.push("/discuss")
    // },
    fun(){
        this.$router.push("/heartbrand/era")
    }
},
created() {
    getlink("http://180.76.121.47:8008/flower")
      .then((ok) => {
        ok.data.data.forEach((v) => {
            // console.log(ok.data.data)
          if (v.flowerId == this.$route.query.flowerId) {
            this.arr.push(v);
          }
        });
        // console.log(this.arr)
      });
       getjsonlink("/demo/typeinfo")
      .then((ok) => {
           // console.log( ok.data.typeflower)
        ok.data.typeflower.forEach((v) => {
           
         if (v.flowerId == this.$route.query.flowerId) {
            this.arr.push(v);
          }
        });
      });
  }
}
</script>

<style scoped>
@import '../../../public/flower/iconfont.css';
.infocon{
    font-size: 0.16rem;
    width: 100%;
     margin-bottom: 0.48rem;
}
.bannerImg{
    width: 100%;
    height: 4.14rem;
}
.titleDes{
    height: 1.32rem;
    padding: 0rem 0.14rem;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
}
.titleDes,.reserve,.norms,.store,.footop,.dro{
    border-bottom: 0.02rem solid #f1f1f1;
    
}
.all a{
    color:#b8b8b8 ;
}
.ori{
    text-decoration: line-through;
    color: #b8b8b8;
}
.lanuage{
    font-size: 0.12rem;
    line-height: 0.16rem;
    color: #d6d6d6;
    margin-top: 0.14rem;
    margin-bottom: 0.22rem;
}
.norms{
    height: 0.52rem;
    line-height: 0.52rem;
     padding: 0rem 0.14rem;
    box-sizing: border-box;
}
.def{
    margin-left: 0.2rem;
    margin-right: 1.5rem;
}
.reserve{
   height: 0.52rem;
   line-height: 0.52rem;
    display: flex;
    padding: 0rem 0.14rem;
    box-sizing: border-box;
    margin-bottom: 0.1rem;
    margin-top: 0.1rem;

}
.norms,.reserve,.store{
  border-top: 0.02rem solid #f1f1f1;   

 }
 .score{
 margin-left: 0.2rem;
  margin-right: 0.8rem;
 }
 .storename{
 margin-left: 0.2rem;
  margin-right: 1rem;
 }
.store{
    height: 0.76rem;
  display: flex;
   padding: 0.08rem 0.14rem;
    box-sizing: border-box;
}
.store img{
    width: 0.48rem;
    height: 0.48rem;
}
.foo{
    width: 100%;
}
.footop{
    width: 90%; 
    margin: auto;
    /* background-color: pink; */
}
.store #goback{
    padding-top: 0.14rem;
    box-sizing: border-box;
}
.dro{
 height: 0.52rem;
 line-height: 0.52rem;
 color: #c6c6c6;
}
.foobottom img{
    width: 100%;
}
</style>